<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="">
<meta name="description" content="">
<title>用户管理</title>
<link href="../../web-frame/layui/css/layui.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/bootstrap.min.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/font-awesome.min.css" rel="stylesheet"/>
<!-- bootstrap-table 表格插件样式 -->
<link href="../../web-frame/ruoyi/libs/bootstrap-table/bootstrap-table.min.css?v=20201129" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/animate.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/style.css?v=20200903" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/ruoyi/css/ry-ui.css?v=4.6.0" rel="stylesheet"/>
<script src="../../web-frame/ruoyi/js/jquery.min.js"></script>
<script src="../../web-frame/ruoyi/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="../../web-frame/ruoyi/libs/bootstrap-table/bootstrap-table.min.js?v=20201129"></script>
<script src="../../web-frame/ruoyi/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20201129"></script>
<script src="../../web-frame/ruoyi/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js?v=20201129"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="../../web-frame/ruoyi/libs/validate/jquery.validate.min.js"></script>
<script src="../../web-frame/ruoyi/libs/validate/messages_zh.min.js"></script>
<script src="../../web-frame/ruoyi/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="../../web-frame/ruoyi/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<!-- 遮罩层 -->
<script src="../../web-frame/ruoyi/libs/blockUI/jquery.blockUI.js"></script>
<script src="../../web-frame/ruoyi/libs/iCheck/icheck.min.js"></script>
<script src="../../web-frame/ruoyi/libs/layer/layer.min.js"></script>
<script src="../../web-frame/layui/layui.js"></script>
<script src="../../web-frame/ruoyi/libs/layer/laytpl.js"></script>
<script src="../../web-frame/ruoyi/libs/layer/form.js"></script>
<script src="../../web-frame/ruoyi/ruoyi/js/common.js?v=4.6.0"></script>
<script src="../../web-frame/ruoyi/ruoyi/js/ry-ui.js?v=4.6.0"></script>
<script src="/web-frame/element/js/axios.js"></script>
<script src="/web-frame/js/glob.js"></script>
<body>

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="addData()">
                    <i class="fa fa-plus"></i> 新增一行
                </a>
                <a class="btn btn-primary " onclick="save()">
                    <i class="fa fa-edit"></i> 保存
                </a>
                <a class="btn btn-danger " onclick="deleteData()">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-warning" onclick="exportData()">
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>

            <div id="test-id">
                    <form id="menu-form">
                        <div class="select-list">
                            <ul>
                                <li>
                                    表名称：<input id="title" type="text" name="tableName"/>
                                </li>
                                <li>
                                    <div id="list-type"></div>
                                </li>
                                <li>
                                    表注释：<input id="note" type="text" name="tableNote"/>
                                </li>
                            </ul>
                        </div>
                    </form>
                <table class="layui-table" id="table-id">
                    <thead>
                    <tr>
                        <th>字段名称</th>
                        <th>字段类型</th>
                        <th>字段长度</th>
                        <th>字段注释</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


<script>
    var num_form=0
    var dataType=urldata('post','/db/getDataTypeList',undefined)
    addData();
    function addData() {
        var str='<form id="test'+num_form+'"><table class="layui-table" ><tr>\n' +
                '    <td> <input type="text" name="field" autocomplete="off"  class="layui-input" ></td>\n' +
                '    <td>'+selectStr()+'</td>\n' +
                '    <td><input type="text" name="length" autocomplete="off"  class="layui-input" ></td>\n' +
                '    <td><input type="text" name="note" autocomplete="off"  class="layui-input" ></td></form>\n' +
                '</tr></table></form>'
        console.log(str)
        num_form++;
        $("#test-id").append(str)
    }

    function selectStr() {
        var arr=dataType.rows;
        var str='<select name="dataType" style="width: 180px;height: 35px">'
        for(var i=0;i<arr.length;i++){
            var obj=arr[i];
            str+='<option value='+obj.key+'>'+obj.value+'</option>'
        }
        str+='</select>'
        return str;
    }

    function exportData() {
        var arr=[];
        for (let i = 0; i < num_form; i++) {
            var data=getFormData(i);
            data=JSON.parse(data)
            arr.push(data);
        }
       return arr;
    }

    //保存
    function save() {
        var data={}
        var tableName= $("input[name='tableName']").val()
        var tableNote=$("input[name='tableNote']").val()
        var arr=exportData();
        data.table=tableName;
        data.tableNote=tableNote;
        data.data=arr;
        data=JSON.stringify(data)
        var result=urldata('post','/db/createTable',data)
        if(result.code==0){
            layer.msg("新增成功");
            location.href="db.html";
        }
    }

    function getFormData(num) {
        var str="#test"+num;
        var data= $(str).serialize();
        data = decodeURIComponent(data,true);
        //会将弹窗的表单数据封装成json数据
        data=DataDeal.formToJson(data);

        return data
    }


    var DataDeal = {
        //将从form中通过$('#refer').serialize()获取的值转成json
        formToJson: function (data) {
            data=data.replace(/&/g,"\",\"");
            data=data.replace(/=/g,"\":\"");
            data="{\""+data+"\"}";
            return data;
        }
    };


</script>
</body>
</html>